import { useNavigate } from 'react-router-dom';
import './Error404.css';
import srcUrl from '../../assets/images/404.png'

function Error404() {
    const navigate = useNavigate();
    const handleBack = () => {
        window.history.back();
    }
    const handleHome = () => {
        navigate('/');
    }

    return (
        <div className="error-404">
            <div className="error-image">
                <img src={srcUrl} alt="404错误" />
            </div>
            <div className='error-text'>
                <h2>抱歉！！！</h2>
                <h3 className="error-title">页面未找到</h3>
                <p>
                    您访问的页面不存在或已被移除，请检查URL是否正确，或返回首页继续浏览。
                </p>

                <div className="error-actions">
                    <button className="back-button mainButton" onClick={handleHome}>
                        首页
                    </button>
                    <button className="back-button mainButton" onClick={handleBack}>
                        返回
                    </button>
                </div>
            </div>
        </div>
    );
}

export default Error404;